<template>
  <div style="width: 100%">
    <el-col>
      <el-form
        ref="fieldForm"
        :model="fieldForm"
        label-width="80px"
        size="mini"
      >
        <div
          v-for="(item,index) in selectField"
          :key="index"
          class="fieldBox"
        >
          <p class="titleP">{{ item.name }}字段：</p>
          <el-form-item
            label-width="100px"
            :label="$t('chart.table_column_width_config')"
            class="form-item"
          >
            <el-radio-group
              v-model="fieldForm[item.id]"
              @change="changeFieldCase(item.id)"
            >
              <el-radio label="adapt"><span>{{ $t('chart.table_column_adapt') }}</span></el-radio>
              <el-radio label="custom">
                <span>{{ $t('chart.table_column_custom') }}</span>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-show="fieldForm[item.id] === 'custom'"
            label=""
            label-width="100px"
            class="form-item form-item-slider"
          >
            <el-slider
              v-model="fieldForm[item.originName]"
              :min="0"
              :max="500"
              show-input
              :show-input-controls="false"
              input-size="mini"
              @change="changeFieldCase(item.originName)"
            />
          </el-form-item>
        </div>
      </el-form>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'FieldSelector',
  props: {
    param: {
      type: Object,
      required: false
    },
    chart: {
      type: Object,
      required: true
    },
    propertyInner: {
      type: Array,
      required: false,
      default: function() {
        return []
      }
    },
    sourceType: {
      type: String,
      default: 'view',
      required: false
    }
  },
  data() {
    return {
      fieldForm: {},
      selectField: []
    }
  },
  watch: {
    'chart': {
      handler: function() {
        this.init()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changeFieldCase(modifyName) {
      this.fieldForm['modifyName'] = modifyName
      this.$emit('onFieldChange', this.fieldForm)
    },
    init() {
      const chart = JSON.parse(JSON.stringify(this.chart))
      if (this.chart.xaxis) {
        if (Object.prototype.toString.call(this.chart.xaxis) === '[object Array]') {
          this.selectField = JSON.parse(JSON.stringify(this.chart.xaxis))
        } else {
          this.selectField = JSON.parse(this.chart.xaxis)
        }
      }
      if (chart.customAttr) {
        let customAttr = null
        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
        } else {
          customAttr = JSON.parse(chart.customAttr)
        }
        if (customAttr.field) {
          this.fieldForm = customAttr.field
        }
      }
      console.log('初始化后的this.fieldForm', this.fieldForm)
    },
    showProperty(property) {
      return this.propertyInner.includes(property)
    }
  }
}
</script>

<style scoped>
.shape-item {
  padding: 6px;
  border: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.form-item-slider ::v-deep .el-form-item__label {
  font-size: 12px;
  line-height: 38px;
}

.form-item ::v-deep .el-form-item__label {
  font-size: 12px;
}

.el-select-dropdown__item {
  padding: 0 20px;
}

span {
  font-size: 12px
}

.el-form-item {
  margin-bottom: 6px;
}

.color-picker-style {
  cursor: pointer;
  z-index: 1003;
}

.color-label {
  display: inline-block;
  width: 60px;
}

.color-type ::v-deep .el-radio__input {
  display: none;
}

.span-label {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  padding: 0 8px;
}

.custom-color-style {
  height: 300px;
  overflow-y: auto;
  padding: 4px 12px;
  border: 1px solid #e6e6e6;
}
.fieldBox{
  border: 1px solid #ccc;
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.titleP{
  padding-left: 10px;
  font-weight: bold;
  margin-bottom: 5px;
}
</style>
